<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        h1{
            text-align: center;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
    <img src="/img/bg/banner3.jpg">
    <h1>限时秒杀区</h1>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item  v-for="(type,index) in productType"  v-on:click="dianji(index)" >
            {{type.productTypeName}}秒杀专区
        </el-menu-item>


    </el-menu>
        <div style="width: 100%;" v-for="(p,index) in product">
        <div style="float: left;background-color: #FFFFFF;width: 600px;height: 300px;margin-top: 10px; margin-left: 50px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <div style="margin-top: 10px;">
                <img v-bind:src="p.productImgUrl" height="280px"width="300px">
            </div>
            <div style="border-radius: 4px;width: 135px;height: 30px;background-color: red; float: left; margin-left: 310px;margin-top: -270px;">
                <i class="el-icon-alarm-clock" style="color: wheat;font-size: 25px; margin-top: 3px;">限时秒杀</i>
            </div>
            <div style="float: left; margin-left: 460px;margin-top: -265px; font-family: 楷体;font-size: 20px;">
                <span>{{p.productName}}</span>
            </div>
            <div style="float: left; margin-left: 320px;margin-top: -200px;">
                <div style="width: 200px;">
                    <el-progress :text-inside="true" :stroke-width="20" :percentage="p.limitedTimeOfferSale/p.limitedTimeOfferTotalNum==1?100:(p.limitedTimeOfferSale/p.limitedTimeOfferTotalNum)*100" status="exception"></el-progress>
                </div>
            </div >
            <div style="float: left; margin-left: 470px;margin-top: -150px;font-size: 20px;color: red;font-family: 楷体;">售卖{{p.limitedTimeOfferSale}}剩余{{p.limitedTimeOfferTotalNum-p.limitedTimeOfferSale}}</div>
            <div v-if="flag==''">
                <div style="float: left; margin-left: 320px;margin-top: -100px;">
                    <span style="color: red;font-family: 楷体;font-size: 20px;">{{p.dataTime}}</span>
                </div>
            </div>
            <div v-if="flag!=''">
                <div style="float: left; margin-left: 320px;margin-top: -100px;">
                    <span style="color: red;font-family: 楷体;font-size: 20px;">{{startTime[index]==0?(endTime[index]==1?(times[index]==0?product.nowData[index]:'剩余时间'+times[index]):'活动结束了'):'活动倒计时:'+times[index]}}</span>
                </div>
            </div>
            <div style="float: left; margin-left: 325px;margin-top: -50px;"><span style="color: red;font-family: 楷体;font-size: 20px;">秒杀价￥{{(p.productPrice*p.limitedTimeOfferDiscount) | showPrice}}</span></div>
            <div style="float: left; margin-left: 480px;margin-top: -50px;">
            <el-button type="danger" style="display: false;"  v-on:click="gm(index)"  v-bind:dialogVisible="dialogVisible">立即抢购</el-button>
        </div>
        </div>
    </div>
        <div v-if="product!=''"  style="float: left;margin-left: 690px">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="size"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
            >
            </el-pagination>
        </div>
    </div>



    <el-dialog
            title="个人发货信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form"  label-width="80px">
           <el-form-item label="电话号码">
               <el-input
                       prefix-icon="el-icon-search"
                       placeholder="请输入联系方式"
                       v-model="tel"
                       clearable>
               </el-input>
           </el-form-item>
            <el-form-item label="收货地址">
            <el-select v-model="addre" placeholder="请选择" >
                <el-option
                        v-for="addr  in address"
                        :label="addr"
                        :value="addr">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="取货时间">
                <el-date-picker
                        v-model="time"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
        </el-form>

     <span slot="footer" class="dialog-footer">
     <el-button type="primary" @click="info">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>

  </span>
    </el-dialog>



</div>




<script>

   var stop='';
   var a=1;
   var typeid='';
   var productIndex='';
    const app=new Vue({
        el:"#app",
        methods: {
            gm(e){
                if(this.user==''){
                    alert("请登录再来购买");
                    window.location.href="/loginAndRegister"
                } else if(this.startTime[e]!=0){
                    this.$message('活动未开始');

                }else if(this.endTime[e]==0){

                    this.$message('活动结束了');

                }else if(this.product[e].limitedTimeOfferTotalNum-this.product[e].limitedTimeOfferSale==0){
                    this.$message('商品售空了');
                    return ;
                }
                if(this.startTime[e]==0&&this.endTime[e]!=0){
                    var vm=this;
                    productIndex=e;
                    axios.get("/freshmarket/limited-time-offer/address")
                        .then(function(resp){
                            vm.address=resp.data.data;
                        });
                    this.dialogVisible=true;
                }
            },
            info() {
                var vm=this;
                let killId=this.product[productIndex].limitedTimeOfferId;
                let productId=this.product[productIndex].productId;
                let number=1;
                let time=this.time;
                let tel=this.tel;
                let addre=this.addre;

                axios.get("/freshmarket/orders/newOrderByLimited",{
                    params:{
                        productId:productId,
                        limitedTimeOfferId:killId,
                        buyNum:1,
                        ordersPickupPhone:tel,
                        ordersPickupAddress:addre,
                        ordersPickupTime:time,
                    }
                })
                .then(function (resp) {
                    if(resp.data.success){
                        vm.$message('购买成功');
                        vm.product[productIndex].limitedTimeOfferSale+=1;
                    }else{
                        vm.$message('购买失败');
                    }
                    vm.time='';
                    vm.tel='';
                    vm.addre='';
                    vm.dialogVisible=false;
                })


            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleCurrentChange(index){

                var vm=this;
                vm.flag='';
                if(typeid==''){
                 typeid=vm.productType[0].productTypeId;
                }
                clearInterval(stop);
                axios.get("/freshmarket/limited-time-offer/pageKillProduct",{
                    params:{id:typeid,index:index}
                })
                    .then(function(resp){
                        vm.product=resp.data.data.records;
                        vm.total=resp.data.data.total;
                        vm.size=resp.data.data.size;
                        vm.current=resp.data.data.current;
                        vm.pages=resp.data.data.pages;
                        vm.times=[]
                        vm.startTime=[]
                        vm.endTime=['1','1','1','1','1','1']
                        a=1;
                        stop=setInterval("time1()",1000);
                    });
            },
            dianji(e){

            clearInterval(stop);
             var vm= this ;
             vm.flag='';
             typeid=vm.productType[e].productTypeId;
             axios.get("/freshmarket/limited-time-offer/pageKillProduct",{

                    params:{id:vm.productType[e].productTypeId}
                })
                    .then(function(resp){

                        if(resp.data.data==null){
                            vm.product=[];
                            vm.$message('此类没有秒杀商品');
                            return ;
                        }else{
                            vm.product=resp.data.data.records;

                            vm.total=resp.data.data.total;
                            vm.size=resp.data.data.size;
                            vm.current=resp.data.data.current;
                            vm.pages=resp.data.data.pages;
                            vm.times=[]
                            vm.startTime=[]
                            vm.endTime=['1','1','1','1','1','1']
                            a=1;
                            stop=setInterval("time1()",1000);
                        }


                    });
            },
        },
        filters:{
            showPrice(price){
                return price.toFixed(2);
            }
        },
        data:{
            activeIndex: '1',
            times:[],
            productType:[],
            product:[],
            startTime:[],
            endTime:['1','1','1','1','1','1'],
            total:'',
            size:'',
            //当前页
            current:'',
            //总页数
            pages:'',
            dialogVisible: false,
            address:[],
            tel:'',
            time:'',
            addre:'',
            flag:'',
            user:'',
        },
        created(){
            var vm=this;

            stop=setInterval("time1()",1000);



            axios.get("/freshmarket/limited-time-offer/findProductType")
            .then(function(resp){
                vm.productType=resp.data.data;
            });
            axios.get("/freshmarket/limited-time-offer/user")
                .then(function(resp){
                    if(resp.data.data!=null){
                        vm.user=resp.data.data;
                    }
                });
            axios.get("/freshmarket/limited-time-offer/pageKillProduct",{
                params:{id:1}
            })
                .then(function(resp){
                   vm.product=resp.data.data.records;
                   vm.total=resp.data.data.total;
                   vm.size=resp.data.data.size;
                   vm.current=resp.data.data.current;
                   vm.pages=resp.data.data.pages;
                });
        },

    })


var o=0;
    function time1() {

        for(var i=0;i<app.product.length;i++){
            var DD = 86400000;
            var HH = 3600000;
            var MM = 60000;
            var d = 0;
            var h = 0;
            var m = 0;
            var s = 0;
            starttime=app.product[i].limitedTimeOfferStartTime;
            if(starttime<=0){
                starttime=0;
            }
            console.log("starttime"+starttime);
            d = parseInt(starttime / DD);
            h = parseInt(starttime % DD / HH);
            m = parseInt(starttime % DD % HH / MM);
            s = parseInt(starttime % DD % HH % MM / 1000);
            console.log(d+"-"+h+"-"+m+"-"+s+"---"+i)
            var stringBuilder="";
            if (d != 0) {
                stringBuilder+=(d + "天");
            }
            if (h != 0) {
                stringBuilder+=(h + "小时");
            }
            if(m!=0){
                stringBuilder+=(m + "分钟");
            }
            if(s!=0){
                stringBuilder+=(s + "秒");
            }
            if(d+h+m+s<=0){
                      console.log("进入")
               // alert(o++);
                app.times.push(0);
                //如果第一次进入 说明是倒计时 进入活动
               if(app.startTime[i]!=0){
                   //如果倒计时时间到了 将持久的时间赋给 limitedTimeOfferStartTime
                   app.product[i].limitedTimeOfferStartTime=app.product[i].limitedTimeOfferDuration-1000;
                   //将times 赋一个0值
                   //app.startTime[i]=(0);
                  // console.log("进入次数"+o++)
                  console.log(app.product[i].limitedTimeOfferStartTime);
                  //console.log(app.product[i].dataTime)
                   //alert(app.times.length)
               }
                app.startTime[i]=0;
               // console.log(app.product[i].limitedTimeOfferDuration);

                if(app.product[i].limitedTimeOfferStartTime<1000){
                    app.endTime[i]=0;
                    console.log("执行了")
                }
            }else{
                console.log(stringBuilder);
                app.times.push(stringBuilder);
                app.product[i].limitedTimeOfferStartTime-=1000;
            }



        }
        console.log("长度为"+app.times.length);
        for (var i=0;i<app.times.length;i++){
            console.log("有"+app.times[i]);
        }
        if(a!=1){
           app.times.splice(0,app.product.length);
            console.log("删除成功"+app.times[0]);
            console.log(app.product.length);
        }
        a++;
        app.flag=a++;



    }

</script>

</body>
</html>
